<template>
  <div class="login">
    <div class="loginform">
      <div class="touxiang">
        <img src="../assets/moon.png" alt="" />
      </div>
      <el-card class="box-card">
        <el-form ref="form" :model="loginform" label-width="80px">
          <el-form-item label="学号">
            <el-input v-model="loginform.id"></el-input>
          </el-form-item>

          <el-form-item label="密码">
            <el-input v-model="loginform.password"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="login" class="btn"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      loginform: {
        id: "",
        password: "",
      },
    };
  },
  methods: {

    // 选课登录
    login() {
    
      axios
        .post("http://localhost:3000/login", qs.parse(this.loginform))
        .then((res) => {
          if (res.data.status == "422") {
            alert(res.data.message);
          } else {
            console.log(res);
            this.$router.push({
              name: "choicec",
              params: { password: this.loginform.password },
            });
          }
        });
    },
  },
};
</script>

<style>
.login {
  width: 100%;
  height: 100%;
  /* background-color: rgb(177, 132, 132); */
}
.loginform {
  width: 450px;
  height: 500px;
  /* background-color: burlywood; */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.touxiang {
  width: 100px;
  height: 100px;
  border: 1px solid rgba(46, 40, 40, 0.212);
  border-radius: 50%;
  position: relative;
  top: 30px;
  left: 180px;
}
.touxiang img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.el-form {
  margin-top: 35px;
}
.btn {
  position: relative;
  left: 85px;
}
</style>